<form class="form-horizontal">
<fieldset>

<!-- Form Name -->
<legend>Create Event</legend>

<!-- Text input-->
<div class="control-group">
  <label class="control-label" for="eventNameTxt">Event Name</label>
  <div class="controls">
    <input id="eventNameTxt" name="eventNameTxt" data-bind="value : eventModel.eventName" type="text" placeholder="Enter event Name" class="input-xlarge">
    
  </div>
</div>

<!-- Text input-->
<div class="control-group">
  <label class="control-label" for="descriptionTxt">Description</label>
  <div class="controls">
    <input id="descriptionTxt" name="descriptionTxt" type="text" data-bind="value : eventModel.description" placeholder="Enter description about the event" class="input-xlarge">
    
  </div>
</div>

<!-- Text input-->
<div class="control-group">
  <label class="control-label" for="recipientTxt">Recipient</label>
  <div class="controls">
    <input id="recipientTxt" name="recipientTxt" type="text" data-bind="value : eventModel.recipientUser" placeholder="Enter Email Address of the recipient" class="input-xlarge">
    
  </div>
</div>

<!-- Text input-->
<div class="control-group">
  <label class="control-label" for="eventDateField">Event Date</label>
  <div class="span5" id="eventDateContainer">
  <div class="input-append date">
    <input id="eventDateField" name="eventDateField"  type="text" data-bind="value : eventModel.eventDate" placeholder="Date of the Event" class="input-xlarge span2">
    
    <span class="add-on"><i class="icon-th"></i></span>
    
  </div>
  </div>
</div>



<!-- Text input-->
<div class="control-group">
  <label class="control-label" for="eventLockDateField">Event Lock Date</label>
  
  <div class="span5" id="eventLockDateContainer">
  <div class="input-append date">
    <input id="eventLockDateField" name="eventLockDateField"  type="text" data-bind="value : eventModel.eventLockDate" placeholder="Date of the  Event Lock Date" class="input-xlarge span2">
    
    <span class="add-on"><i class="icon-th"></i></span>
    
  </div>
  </div>
  
  
</div>

<!-- Text input-->
<div class="control-group">
  <label class="control-label" for="inviteesTxt">invitees</label>
  <div class="controls">
    <input id="inviteesTxt" name="inviteesTxt" type="text" data-bind="value : eventModel.inviteesInput" placeholder="Enter invitees separated by comma" class="input-xlarge" required="">
    
  </div>
</div>

<!-- Textarea -->
<div class="control-group">
  <label class="control-label" for="fromMessageTextArea">fromMessage</label>
  <div class="controls">                     
    <textarea id="fromMessageTextArea" data-bind="value : eventModel.fromMessage" name="fromMessageTextArea">Add Message here</textarea>
  </div>
</div>

<!-- Multiple Checkboxes -->




   
   <div class="control-group">
   
   <label class="checkbox" style="margin-left: 179px;">
      <input type="checkbox" id="enableReminder"> Remember me
    </label>
    
    </div>
    
<!-- Button -->
<div class="control-group">
  <label class="control-label" for="createEventBtn"></label>
  <div class="controls">
    <button id="createEventBtn" name="createEventBtn" data-bind="click : createEventService" class="btn btn-primary">Save Event</button>
  </div>
</div>

</fieldset>
</form>